<template>
  <div class="lists">
    <div class="listItems" v-for="item in list" :key="item.id">
      <div class="listTitle flex-space-between">
        <h3>{{item.goods_name}}</h3>
        <span>
          {{item.order_status_name}}
        </span>
      </div>
      <div class="listNumber">
<!--        订单号-->
        <div class="number">订单号：{{item.order_sn}}</div>
        <div class="number">创建时间：{{item.created_at}}</div>
        <div class="number">付款时间：{{item.paymented_at}}</div>
        <div class="money flex-space-between">
          <div>￥{{item.real_money | priceFilter}}</div>
          <button @click="cancelOrder(item)" v-if="item.is_can_delete">取消订单</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    props:['list'],
    methods:{
      // 取消订单
      cancelOrder(item){
        this.$emit('cancelOrder',item)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../../assets/less/common);
  .lists{
    width:100%;
    .listItems{
      width:100%;
      background: #232323;
      border-radius: 0.1rem;
      padding:0 0.3rem;
      box-sizing: border-box;
      margin-bottom: 0.2rem;
      .listTitle{
        width:100%;
        padding:0.38rem 0;
        box-sizing: border-box;
        border-bottom: 0.02rem solid #444444;
        h3{
          font-size:@fontSize34;
          font-weight: @fontWeight600;
          font-family:@fontFamily400;
          color:@whiteColor;
        }
        span{
          font-size:@fontSize34;
          font-weight: @fontWeight600;
          font-family:@fontFamily400;
          color:#FD0000;
        }
      }
      .listNumber{
        width:100%;
        padding:0.3rem 0 0.46rem 0;
        box-sizing: border-box;
        .number{
          font-size:@fontSize28;
          font-weight: @fontWeight400;
          font-family:@fontFamily400;
          color:rgba(255,255,255,0.8);
          line-height: 0.5rem;
        }
        .money{
          margin-top:0.28rem;
          font-size:@fontSize28;
          font-weight: @fontWeight400;
          font-family:@fontFamily400;
          color:#FFFFFF;
          button{
            width:1.73rem;
            height:0.56rem;
            background:none;
            border:0.02rem solid #FD0000;
            border-radius:0.28rem;
            font-size:@fontSize30;
            font-weight: @fontWeight400;
            font-family:@fontFamily400;
            color:#FD0000;
          }
        }
      }
    }
  }
</style>
